<template>
	<div class="timelineBox">
		<div class="main">
			<ul class="cbp_tmtimeline">
				<li>
					<!-- 个人简介 -->
					<div class="paragraph cbp_div">
						<div class="cbp_left">
							<span>个人简介</span>
						</div>
						<div class="cbp_tmlabel">
							<ul class="cbp_tmlabelUl">
								<li class="cbp_tmlabelLi flex" v-if="synopsisData.introduce && synopsisData.introduce.length > 0">
									<span>{{synopsisData.introduce[0].introduceContent}}</span>
								</li>
								<li v-else class="cbp_tmlabelLi" style="color: #C2C2C2;">暂无内容</li>
							</ul>
							<div class="cbp_tmicon"></div>
						</div>
					</div>
					<!-- 获奖成果 -->
					<div class="paragraph cbp_div">
						<div class="cbp_left">
							<span>获奖成果</span>
						</div>
						<div class="cbp_tmlabel">
							<ul class="cbp_tmlabelUl">
								<div v-if="synopsisData.awardWinning && synopsisData.awardWinning.length > 0">
									<li class="cbp_tmlabelLi flex" v-for="item in synopsisData.awardWinning" :key="item.id">
										<span>{{item.getDate}} {{ item.issuingDepartment }} {{item.honoraryTitle}}</span>
										<el-image class="cbp_tmlabelLiimg" v-if="item.isOpen == 1 && item.image" :src="require('@/assets/image/specialist/lookImage.png')" alt="" :preview-src-list="[item.image]"></el-image>
									</li>
								</div>
								<li v-else class="cbp_tmlabelLi" style="color: #C2C2C2;">暂无内容</li>
							</ul>
							<div class="cbp_tmicon"></div>
						</div>
					</div>
					<!-- 培训经历 -->
					<div class="paragraph cbp_div">
						<div class="cbp_left">
							<span>培训经历</span>
						</div>
						<div class="cbp_tmlabel">
							<ul class="cbp_tmlabelUl">
								<div v-if="synopsisData.trainingExperience && synopsisData.trainingExperience.length > 0">
									<li class="cbp_tmlabelLi flex" v-for="item in synopsisData.trainingExperience" :key="item.id">
										<span>{{item.getDate}} {{ item.trainingDepartment }} {{item.trainingName}}</span>
										<el-image class="cbp_tmlabelLiimg"  v-if="item.isOpen == 1 && item.image" :src="require('@/assets/image/specialist/lookImage.png')" alt="" :preview-src-list="[item.image]"></el-image>
									</li>
								</div>
								<li v-else class="cbp_tmlabelLi" style="color: #C2C2C2;">暂无内容</li>
							</ul>
							<div class="cbp_tmicon"></div>
						</div>
					</div>
					<!-- 社会职务 -->
					<div class="paragraph cbp_div">
						<div class="cbp_left">
							<span>社会职务</span>
						</div>
						<div class="cbp_tmlabel">
							<ul class="cbp_tmlabelUl">
								<div v-if="synopsisData.socialPosition && synopsisData.socialPosition.length > 0">
									<li class="cbp_tmlabelLi flex" v-for="item in synopsisData.socialPosition" :key="item.id">
										<span>{{item.getDate}} {{ item.organization }} {{item.duty}}</span>
										<el-image class="cbp_tmlabelLiimg"  v-if="item.isOpen == 1 && item.image" :src="require('@/assets/image/specialist/lookImage.png')" alt="" :preview-src-list="[item.image]"></el-image>
									</li>
								</div>
								<li v-else class="cbp_tmlabelLi" style="color: #C2C2C2;">暂无内容</li>
							</ul>
							<div class="cbp_tmicon"></div>
						</div>
					</div>
					<!-- 主持在研项目 -->
					<div class="paragraph cbp_div">
						<div class="cbp_left">
							<span>主持在研项目</span>
						</div>
						<div class="cbp_tmlabel">
							<ul class="cbp_tmlabelUl">
								<div v-if="synopsisData.projectsStudy && synopsisData.projectsStudy.length > 0">
									<li class="cbp_tmlabelLi flex" v-for="item in synopsisData.projectsStudy" :key="item.id">
										<a :href="item.link"  v-if="item.isOpen == 1 && item.image" target="_blank">
											<span>{{item.startDate}} {{ item.projectName }} {{item.subjectName}}</span>
										</a>
										<span v-else>{{item.startDate}} {{ item.projectName }} {{item.subjectName}}</span>
										<!-- <el-image class="cbp_tmlabelLiimg"  v-if="item.isOpen == 1 && item.image" :src="require('@/assets/image/specialist/lookImage.png')" alt="" :preview-src-list="[item.image]"></el-image> -->
									</li>
								</div>
								<li v-else class="cbp_tmlabelLi" style="color: #C2C2C2;">暂无内容</li>
							</ul>
							<div class="cbp_tmicon"></div>
						</div>
					</div>
					<!-- 代表文章专著    -->
					<div class="paragraph cbp_div">
						<div class="cbp_left">
							<span>代表文章专著</span>
						</div>
						<div class="cbp_tmlabel">
							<ul class="cbp_tmlabelUl">
								<div v-if="synopsisData.delegateArticle && synopsisData.delegateArticle.length > 0">
									<li class="cbp_tmlabelLi flex" v-for="item in synopsisData.delegateArticle" :key="item.id">
										<a :href="item.link"  v-if="item.isOpen == 1 && item.image" target="_blank">
											<span>{{item.publishDate}} {{ item.periodical }} {{item.articleTitle}}</span>
										</a>
										<span v-else>{{item.publishDate}} {{ item.periodical }} {{item.articleTitle}}</span>
										<!-- <el-image class="cbp_tmlabelLiimg"  v-if="item.isOpen == 1 && item.image" :src="require('@/assets/image/specialist/lookImage.png')" alt="" :preview-src-list="[item.image]"></el-image> -->
									</li>
								</div>
								<li v-else class="cbp_tmlabelLi" style="color: #C2C2C2;">暂无内容</li>
							</ul>
							<div class="cbp_tmicon"></div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['synopsisData'],
		data() {
			return {
				detailContent: []
			};
		},
		mounted() {
			setTimeout(() => {
				this.setData()
			}, 300)
		},
		methods: {
			setData() {
				// 为页面写入数据
				let data = this.synopsisData

				if (data.introduce && data.introduce.length > 0) {
					// 个人简介
					let obj = {
						title: '',
						list: []
					}
					let objList = {
						time: '',
						title: '',
						isOpen: 0
					}
					objList.title = data.introduce[0].introduceContent
					objList.time = data.introduce[0].createDate
					objList.isOpen = 0
					obj.title = '个人简介'
					obj.list.push(objList)
					this.detailContent.push(obj)
				}
				if (data.awardWinning && data.awardWinning.length > 0) {
					// 获奖成果
					let obj = {
						title: '',
						list: []
					}
					let objList = {
						time: '',
						title: '',
						image: '',
						isOpen: 0
					}
					data.awardWinning.forEach((v, i) => {
						objList.title = v.honoraryTitle
						objList.time = v.getDate
						objList.image = v.image
						objList.isOpen = v.isOpen
						setTimeout(()=>{
							obj.list.push(objList)
							console.log(objList, obj)
						},i*100)
					})
					obj.title = '获奖成果'
					this.detailContent.push(obj)
				}
				// console.log(this.detailContent)
			},
		}
	};
</script>

<style scoped="scoped">
	.timelineBox {
		/* padding: 30px 0; */
	}

	.cbp_div {
		height: auto;
		width: 680px;
	}

	.cbp_left {
		width: 100px;
		color: #333333;
		font-size: 14px;
		font-weight: 400;
		text-align: center;
		/* line-height: 1.4; */
		/* margin-bottom: -60px; */
	}

	.main {
		width: 100%;
		/* max-width: 69em; */
		margin: 0 auto;
		padding: 0 1.875em 3.125em 1.875em;
	}

	.cbp_tmtimeline {
		width: 680px;
		margin: 30px 0 0 0;
		padding: 0;
		list-style: none;
		position: relative;
	}

	/* The line */
	.cbp_tmtimeline:before {
		content: '';
		position: absolute;
		top: 5px;
		bottom: 0;
		width: 3px;
		height: calc(100% - 10px);
		background: #23B14D;
		left: 120px;
		/* margin-left: -11px; */
	}

	.cbp_tmtimeline>li {
		position: relative;
	}

	.cbp_tmtimeline>li .cbp_tmlabel {
		margin: -20px 0 15px 135px;
		color: black;
		padding: 0 1em;
		font-size: 14px;
		position: relative;
		border-radius: 5px;

	}

	.cbp_tmlabelLi {
		color: #333333;
		margin-bottom: 10px;
		align-items: center;
		font-weight: 400;
	}

	.cbp_tmlabelLi .cbp_tmlabelLiimg {
		margin-left: 20px;
		width: 12px;
		height: 12px;
		cursor: pointer;
	}

	.cbp_tmtimeline>li .cbp_tmicon {
		width: 10px;
		height: 10px;
		font-family: 'ecoico';
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		position: absolute;
		color: #fff;
		background: #23B14D;
		border-radius: 50%;
		/* box-shadow: 0 0 0 3px #afdcf8; */
		left: -19px;
		top: 6px;
		/* margin: 0 0 0 -130px; */
	}

	.paragraph {
		margin-bottom: 40px;
	}
</style>
